<template>
	<!-- 发布活动 -->
	<view class="">
		<!-- 选项卡 -->
		<view class="select-tab">
			<view class="tabs" style="width: 60%; margin: 0 auto;background: #fff;">
				<v-tabs v-model="activeTab"  :tabs="cateList"  @change="changeTab" :scroll="false" activeColor="#0068ff" lineColor="#0068ff" lineHeight="3px" height="90rpx" />
			</view>
		</view>
		
		<!-- 线上活动 -->
		<view class="activity" v-if="activeTab == 0">
			<form @submit.stop="postAct" @reset="">
				<input type="text" hidden name="type" :value="cateList[activeTab].type"  maxlength="-1"/>
				<input type="text" hidden name="start_at" :value="startTime"  maxlength="-1"/>
				<input type="text" hidden name="end_at" :value="endTime"  maxlength="-1"/>
				<input type="text" hidden name="images" :value="images"  maxlength="-1"/>
				<input type="text" hidden name="activable_id" :value="selectedCir.id"  maxlength="-1"/>
				<input type="text" hidden name="location" :value="JSON.stringify(location)"  maxlength="-1"/>
				<!-- images-area -->
				<view class="upload-images-area" :class="images.length > 0 ?'':'jcenter'">
					<!-- 展示相集 -->
					<view class="images-area"  >
						<view class="image-item" v-if="images.length"  v-for="(item,index) in images" @click="viewImage(item,images)" :data-url="images[index]" :key="index" >
							<image :src="item" mode="aspectFill"></image>
							<view class="delete-icon" @tap.stop="delImg" :data-index="index">
								<image src="/static/images/post/delete-image.svg" mode=""></image>
							</view>
						</view>
						<!-- 上传相集 -->
						<view class="upload" @tap="chooseImages" v-if="images.length < 9" >
							<view class="notimage" v-if="!images.length" >
								<image src="/static/images/post/upimage.svg" mode="" ></image>
								<view class="up-cover-desc" >上传封面</view>
							</view>
							<view class="haveimage" v-else="images.length">
								<image src="/static/images/post/continue_add_img.svg" mode="" ></image>
							</view>
							
						</view>
					</view>
				</view>
				
				<view class="p-title">
					<view class="title-tip">活动标题</view>
					<input type="text" name="title" :value="n_name" placeholder="输入活动标题" class="cirname" maxlength="20"/>
				</view>
				<view class="intro">
					<view class="cir-desc">活动内容</view>
					<textarea placeholder="说说活动的特色~" class="cir-textarea" cols="30" rows="30" maxlength="120"  name="intro"  v-model="val">
					</textarea>
					<view class="count">
						<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{remnant}}</p>
						<view class="">/120</view>
					</view>
				</view>
				<view class="time">
					<view class="t-desc">
						设置活动起止时间
					</view>
					<view class="content">
						<test-com :beginYear="year" endYear="2070" :selectTime="startTime" @confirm="startOnConfirm"></test-com>
						<view class="contact">
							—
						</view>
						<test-com :beginYear="year" endYear="2070" :selectTime="endTime" @confirm="endOnConfirm"></test-com>
					</view>
				</view>
				<view class="select-circle" @tap.stop="selectCir">
					<view class="select">
						<image src="/static/images/post/circle.svg" mode="" class="circle-icon"></image>
						<view class="" v-if="selectedCir.name">{{selectedCir.name}}</view>
						<!-- <view v-else-if="currentCir.name" >{{currentCir.name}}</view> -->
						<view v-else>选择圈子</view>
					</view>
					<image src="/static/images/user/godetail.png" mode=""></image>
				</view>
				<view class="p-title">
					<view class="title-tip">联系人</view>
					<input type="text" name="contact_name" :value="contact_name" placeholder="请输入联系姓名" class="cirname" maxlength="20"/>
				</view>
				<view class="p-title">
					<view class="title-tip">联系号码</view>
					<input type="number" name="phone" :value="phone" placeholder="请输入联系号码" class="cirname" maxlength="20"/>
				</view>
				<view class="create">
					<button class="report" form-type="submit">发布活动</button>
				</view>
			</form>
		</view>
		
		<!-- 线下活动 -->
		<view class="activity" v-if="activeTab == 1">
			<form @submit.stop="postAct" @reset="">
				<input type="text" hidden name="type" :value="cateList[activeTab].type"  maxlength="-1"/>
				<input type="text" hidden name="start_at" :value="startTime"  maxlength="-1"/>
				<input type="text" hidden name="end_at" :value="endTime"  maxlength="-1"/>
				<input type="text" hidden name="images" :value="images"  maxlength="-1"/>
				<input type="text" hidden name="activable_id" :value="selectedCir.id"  maxlength="-1"/>
				<input type="text" hidden name="location" :value="JSON.stringify(location)"  maxlength="-1"/>
				<!-- images-area -->
				<view class="upload-images-area" :class="images.length > 0 ?'':'jcenter'">
					<!-- 展示相集 -->
					<view class="images-area"  >
						<view class="image-item" v-if="images.length"  v-for="(item,index) in images" @click="viewImage(item,images)" :data-url="images[index]" :key="index" >
							<image :src="item" mode="aspectFill"></image>
							<view class="delete-icon" @tap.stop="delImg" :data-index="index">
								<image src="/static/images/post/delete-image.svg" mode=""></image>
							</view>
						</view>
						<!-- 上传相集 -->
						<view class="upload" @tap="chooseImages" v-if="images.length < 9" >
							<view class="notimage" v-if="!images.length" >
								<image src="/static/images/post/upimage.svg" mode="" ></image>
								<view class="up-cover-desc" >上传封面</view>
							</view>
							<view class="haveimage" v-else="images.length">
								<image src="/static/images/post/continue_add_img.svg" mode="" ></image>
							</view>
							
						</view>
					</view>
				</view>
				
				<view class="p-title">
					<view class="title-tip">活动标题</view>
					<input type="text" name="title" :value="n_name" placeholder="输入活动标题" class="cirname" maxlength="20"/>
					{{n_name}}
				</view>
				<view class="intro">
					<view class="cir-desc">活动内容</view>
					<textarea placeholder="说说活动的特色~" class="cir-textarea" cols="30" rows="30" maxlength="120"  name="intro"  v-model="val">
					</textarea>
					<view class="count">
						<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{remnant}}</p>
						<view class="">/120</view>
					</view>
				</view>
				<view class="time">
					<view class="t-desc">
						设置活动起止时间
					</view>
					<view class="content">
						<test-com :beginYear="year" endYear="2070" :selectTime="startTime" @confirm="startOnConfirm"></test-com>
						<view class="contact">
							—
						</view>
						<test-com :beginYear="year" endYear="2070" :selectTime="endTime" @confirm="endOnConfirm"></test-com>
					</view>
				</view>
				<view class="select-circle" @tap.stop="selectCir">
					<view class="select">
						<image src="/static/images/post/circle.svg" mode="" class="circle-icon"></image>
						<view class="" v-if="selectedCir.name">{{selectedCir.name}}</view>
						<view v-else>选择圈子</view>
					</view>
					<image src="/static/images/user/godetail.png" mode=""></image>
				</view>
				<view class="p-title">
					<view class="title-tip">联系人</view>
					<input type="text" name="contact_name" :value="contact_name" placeholder="请输入联系姓名" class="cirname" maxlength="20"/>
				</view>
				<view class="p-title">
					<view class="title-tip">联系号码</view>
					<input type="number" name="phone" :value="phone" placeholder="请输入联系号码" class="cirname" maxlength="20"/>
				</view>
				<view class="p-title">
					<view class="title-tip">最大参加人数</view>
					<input type="number" name="max_people" :value="max_people" placeholder="请输入最大参加人数" class="cirname" maxlength="20"/>
				</view>
				<view class="p-title addre_flex" @tap="chooseLocation">
					<view class="title-tip">详细地址：</view>
					<view class="name" v-if="location[0].name">{{location[0].name}}</view>
					<view class="tip" v-else>点击右侧图标选择地址</view>
					<image src="/static/images/icon/location.png" mode=""></image>
				</view>
				<view class="create">
					<button class="report" form-type="submit">发布活动</button>
				</view>
			</form>
		</view>
		
	</view>
	
	<!-- 创作诗歌 -->
</template>

<script>
	import testCom from '../../../components/content/test_com.vue'
	import api from '../../../common/api.js'
	import dateUtils from '@/common/utils/dateUtils.js';
	import graceChecker from '../../../common/graceChecker.js'
	
	export default {
		
		data() {
			const date = new Date()
			const year = date.getFullYear() 
			const month = date.getMonth() + 1
			const day = date.getDate()
			const hour = date.getHours()
			const minute = date.getMinutes()
			const second = date.getSeconds()
			const currentTime = year + '-' + month + '-' + day + ' ' + hour +':' +minute + ':' + second
			return {
				upload_api: this.uploadApi ,//图片上传url
				activeTab:0,						//当前活跃tab_id
				cateList:[{name:'线上',type:'online'},{name:'线下',type:'offline'}],
				ispost:1,								//用于判断是否重复提交
				paragcourt:"" ,					//段落内容字数
				n_name:'',							//活动标题
					val: "",      				//活动简介
				selectedCir:[], 				//活动发布圈子
				startTime:currentTime,	//活动开始时间--预设为当前时间
				endTime:currentTime,		//活动结束时间--预设为当前时间
				images:[],							//活动封面图
				contact_name:'',				//活动联系人
				phone:'',								//活动联系号码
				max_people:'',					//活动最大参加人数
				year:year,
				location:[{							//线下选择位置
					name:'',
					address:'',
					latitude:'',
					longitude:''
				}],
			}
		},
		
		components:{
			testCom			//时间选择组件
		},
		
		computed: {
			remnant(e) {//实时记录诗歌简介字数
				return  this.val.length;
			},
		},
		
		onShow() {
			uni.$once('selectedCir',(res) => {//选择的发布圈子
				this.selectedCir = res
			})
		},
		
		methods:{
			
			changeTab(e) {//切换选项卡--清空所有输入内容--重新赋值活动时间为当前时间
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				const currentTime = year + '-' + month + '-' + day + ' ' + hour +':' +minute + ':' + second
				this.activeTab = e
				this.val = ''				//活动简介
				this.images = []		//活动封面图
				this.startTime = currentTime,		//活动开始时间
				this.endTime =  currentTime	//活动结束时间
			},
			
			chooseLocation() {//选择线下活动位置
				var _that = this
				uni.chooseLocation({
					success: res => {
						this.location[0].name = res.name
						this.location[0].address= res.address
						this.location[0].latitude = res.latitude
						this.location[0].longitude = res.longitude
					},
					fail: () => {
							uni.getSetting({
								success: function(res) {
									var statu = res.authSetting;
									console.log(statu);
									if (!statu['scope.userLocation']) {
										console.log(123);
										uni.showModal({
											title: '是否授权当前位置',
											content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
											success(tip) {
												if (tip.confirm) {
													uni.openSetting({
														success: function(data) {
															if (data.authSetting["scope.userLocation"] === true) {
																uni.showToast({
																	title: '授权成功',
																	icon: 'success',
																	duration: 1000
																})
																//授权成功之后，再调用chooseLocation api选择地方
																setTimeout(function() {
																	uni.chooseLocation({
																		success: (res) => {
																			_that.location[0].name = res.name
																			_that.location[0].address= res.address
																			_that.location[0].latitude = res.latitude
																			_that.location[0].longitude = res.longitude
																		}
																	})
																}, 1000)
															}
														}
													})
												} else {
													uni.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})
												}
											}
										})
					 
									}
								}
							})
						}
				});
			},
			
			startOnConfirm(val) {//活动开始时间
				console.log(val);
				this.startTime = val.selectRes
				console.log(this.startTime)
			},
			
			endOnConfirm(vals) {//活动结束时间
				this.endTime = vals.selectRes
				console.log(this.endTime)
			},
			
			viewImage(item,images) {//预览图片
				uni.previewImage({
					urls:images,
					current:item,
					indicator:"default"
				})
			},	
			
			delImg(e) {//删除封面
				this.images.splice(e.currentTarget.dataset.index, 1)
				// this.images = ''
			},
			
			selectCir() {//选择发布圈子
				uni.navigateTo({
					url: '/pages/post/comps/category'
					
				});
			},
			
			async postAct(e) {//表单提交--发布打卡
				console.log(e);
				if(!this.ispost) {
					uni.showToast({ title: '勿重复提交 ', icon: "none" });
					return 
				}
				var {actid,type,title,intro,start_at,end_at,activable_id,images,type,max_people,phone,contact_name,location} = e.detail.value
				console.log(title,intro,start_at,end_at,activable_id,images,type,max_people,phone,contact_name,location);
				var rule = [
					{name:"images", checkType : "notnull", errorMsg:"请上传活动封面"},
					{name:"title", checkType : "notnull", errorMsg:"请填写活动标题内容"},
					{name:"intro", checkType : "notnull", errorMsg:"请填写活动描述内容"},
					{name:"start_at", checkType : "notnull", errorMsg:"请填写活动开始时间"},
					{name:"end_at", checkType : "notnull", errorMsg:"请填写活动结束时间"},
					{name:"activable_id", checkType : "notnull", checkRule:"0,", errorMsg:"请选择发布圈子"},
					{name:"contact_name", checkType : "notnull", checkRule:"0,", errorMsg:"姓名不能为空"},
					{name:"phone", checkType : "phoneno", errorMsg:"请输入正确的联系号码"},
				];
				if(this.activeTab == 1) {
					rule.push({name:"max_people", checkType : "int", errorMsg:"请输入正确的最大参加人数"})
				}else {
					max_people = ''
				}
				//进行表单检查
				var checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				// 验证时间
				var timestamp = (new Date()).getTime() ; //获取当前系统时间戳 / 1000---秒数
				console.log('当前时间',timestamp);
				console.log('结束时间',dateUtils.datetotime(end_at) - 900000);
				if( dateUtils.datetotime(end_at) - 900000 <= timestamp) {
					uni.showToast({
						title:'活动结束时间需大于当前时间15分钟以上',
						icon:'none'
					})
					return 
				}else if(dateUtils.datetotime(start_at) >= dateUtils.datetotime(end_at)) {
					uni.showToast({
						title:'活动结束时间需大于开始时间',
						icon:'none'
					})
					return 
				}
				// 验证位置信息
				if(this.activeTab === 1) {
					let jlocation = JSON.parse(location)
					for(var item of jlocation) {
						console.log('地址+++++++++++++++',item);
						if(item.name == '') {
							uni.showToast({ title: '位置信息不能为空 ', icon: "none" });
							return
						}
					}
				}
				uni.showLoading({
					title:'提交中'
				});
				var res = await api.CreateActivity(type,title,intro,start_at,end_at,activable_id,images,contact_name,phone,max_people,location)
					uni.hideLoading()
				if(res.err == 0)  {
					this.ispost = 0
					uni.showToast({
						title:res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},700)
				}else {
					uni.showToast({
						title:res.msg
					})
				}
			},
			
			chooseImages() {//上传相集images
				var _self = this
				uni.chooseImage({
					count:9,//默认1
					sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有 'original', 'compressed'
					sourceType: ['album','camera'],  //从相册选择或者拍照 'album','camera'
					success: (res) => {
						console.log(res);
						res.tempFilePaths.forEach((item,index)=>{
							uni.showLoading({title:"上传中"});
							var uploadTask = uni.uploadFile({
								url: _self.upload_api,
								// url:'http://bbtest.test/api/upload',
								filePath: item,
								fileType: 'image',
								name: 'file',
								dataType: 'json',
								success: function (uploadFileRes) {
									// 上传成功后返回服务器端保存的路径
									var jsondata = JSON.parse(uploadFileRes.data)
									if( jsondata.err ==0 ){
										if(_self.activeTab == 0) {
										}
											_self.images.push(jsondata.file_path) 
										uni.hideLoading();
										uni.showToast({
											title: jsondata.msg,
											duration:800
										})
									}else{
											uni.showToast({
												title:jsondata.msg,
												icon:'none'
											})
										}
									}
							 });
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.select-tab {
	width: 750rpx;
	top: 0;
	height: 90rpx;
	position: fixed;
	z-index: 99;
	background-color: #ffffff;
	background-color: #fff;
	border-bottom: 4rpx solid #F3F6F5;
}
.activity {
	margin-top: 90rpx;
	padding: 20rpx 30rpx 151rpx;
	background-color: #fff;
	.p-title{
		
		padding: 10rpx 0;
		.title-tip {		
			margin: 20rpx 10rpx 10rpx;
		}
		input {
			font-size: 28rpx;
			border: 2rpx solid #F3F6F5;
			margin: 10rpx 0;
			background: rgba(246,247,249,0.9);
			border-radius: 15rpx;
		  padding: 20rpx 30rpx;
		}
		image {
			width: 50rpx;
			height: 55rpx;
		}
	}
	.addre_flex {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		border-top: 1rpx solid #F3F6F5;
		border-bottom: 1rpx solid #F3F6F5;
		.name,.tip {
			margin: 20rpx 10rpx 10rpx;
			width: 450rpx;
		}
		.tip {
			color: #999999;
		}
	}
}
.time {
	.t-desc {
		margin: 30rpx 0 10rpx;
	}
}
.create {
	position: fixed;
	height: 150rpx;
	width: 750rpx;
	z-index: 99;
	bottom: 0;
	background-color: #fff;
	border-top: 1rpx solid #F3F6F5;
}
.select-circle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 36rpx 10rpx;
		border-top: 1rpx solid #F3F6F5;
		border-bottom: 1rpx solid #F3F6F5;
		margin-left: 10rpx;
		margin-top: 40rpx;
		height: 20rpx;
		.select {
			display: flex;
		}
		.circle-icon {
			margin-right: 4rpx;
		}
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
.intro,.poem-paragraph {
	position: relative;
	font-size: 30rpx;
	background-color: #fff;
	.cir-desc {
		margin: 20rpx 10rpx 10rpx;
	}
	.cir-textarea {
		border: 2rpx solid #F3F6F5;
		margin: 10rpx 0;
		background: rgba(246,247,249,0.5);
		border-radius: 15rpx;
		line-height: 34rpx;
	}
	.count {
		display: flex;
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
		color: #999;
		.remnant {
			color: #999;
		}
		.zero{
			color: #FF0000;
		}
	}
	textarea {
		height: 210rpx;
		width: 650rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
}
.count {
		display: flex;
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
		color: #999;
		.remnant {
			color: #999;
		}
		.zero{
			color: #FF0000;
		}
	}
	textarea {
		height: 210rpx;
		width: 650rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
.report {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 600rpx;
	height: 82rpx;
	margin: auto;
	left: 0;
	right: 0;
	border-radius: 60rpx;
	text-align: center;
	line-height: 82rpx;
	color: #FFFFFF;
	border-radius: 60rpx;
	background-color: #0068FF;
}
.content {
	display: flex;
	margin: 20rpx 0;
	// flex-direction: column;
	align-items: center;
	.contact {
		padding: 0 10rpx;
	}
}
.jcenter {
	justify-content: center;
}
.upload-images-area {
	/* width: 750rpx;
	margin: 0 auto;
	height: 1000rpx; */
	display: flex;
	// justify-content: center;2
	padding: 0 15rpx;
	
	.images-area {	
		display: flex; 
		flex-wrap: wrap;
		// width: 700rpx;
		box-sizing: border-box;
		.image-item {
			position: relative;
			width: 200rpx;
			height: 190rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			.delete-icon {
				position: absolute;
				right: 5rpx;
				top: 5rpx;
				image {
					width: 45rpx;
					height: 45rpx;
					// background: rgba(0,0,0,.2);
				}
			}
		}
		.upload {
			display: flex;
			align-items: center;
			flex-direction: column;
			// justify-content: center;
			// width: 220rpx;
			// height: 210rpx;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
			border: 1rpx solid #F3F6F5;
			color: #797A7E;
			font-size: 28rpx;
			.haveimage {
				width: 200rpx;
				height: 190rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
			.notimage {
				display: flex;
				position: relative;
				width: 200rpx;
				height: 190rpx;
				flex-direction: column;
				align-items: center;
				font-size: 30rpx;
				background: rgba(245,245,245,.8);
				.up-cover-desc {
					position: absolute;
					width: 200rpx;
					height: 44rpx;
					text-align: center;
					// left: 0;
					// right: 0;
					// margin: 0 auto;
					color: #FFFFFF;
					background-color:rgba(122,122,122,.8);
					bottom: 0;
					border-bottom-left-radius: 10rpx;  
					border-bottom-right-radius: 10rpx; 
				}
				image {
					margin: 28rpx 0 5rpx;
					width: 70%;
					height: 55%;
				}
			}
		}
	}
}
</style>
